<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>datagrid</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<!--<link rel="stylesheet" type="text/css" href="metro_gray.css">-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
body{padding: 0px;}
.wrap_search .search_item, .wrap_search .search_item .item_text, .wrap_search .search_item .item_obj{display: inline-block;height: 28px; line-height: 28px; overflow: hidden;}
.wrap_search .search_item{width: 200px;}
.wrap_search .search_item .item_text{width: 80px; text-align: right;}
.wrap_search .search_item .item_obj{}
.wrap_search .search_item.search_between{display: inline-block; width: 400px;}
.wrap_search input,select{width: 100px;}

</style>
</head>
<body>

    <table class="easyui-datagrid" 
            data-options="rownumbers:true,singleSelect:true,url:'http://www.jeasyui.com/demo/main/datagrid2_getdata.php',method:'get',toolbar:'#tb',fit:true,border:false,pagination:true">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
        <div class="wrap_search">
            <span class="search_item search_between">
                <span class="item_text">日期: </span>
                <span class="item_obj">
                    <input class="easyui-datebox"/> ～ <input class="easyui-datebox"/>
                </span>
            </span>
            <span class="search_item">
                <span class="item_text">语言:</span>
                <span class="item_obj">
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                    </select>
                </span>
            </span>
            <span class="search_item">
                <span class="item_text">订单号: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">联系方式: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">语言:</span>
                <span class="item_obj">
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                    </select>
                </span>
            </span>
            <span class="search_item">
                <span class="item_text">订单号: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">联系方式: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">语言:</span>
                <span class="item_obj">
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                    </select>
                </span>
            </span>
            <span class="search_item">
                <span class="item_text">订单号: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">联系方式: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" />
                </span>    
            </span>
        </div>
        <div style="text-align: left; margin:6px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="top.openWindow();">增加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
            <div style="float:right; padding-right:40px;">
                <a href="#" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-search">重置</a>
            </div>
        </div>
    </div>

    <div id="ft" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="alert('增加')"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
    </div>


</body>
</html>